<extend name="en_us:Public:base" />
<block name="title">
    <title>QRInn - refund</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/common_control.css?rev=bdf8875f9e52f651ec877dc7073586ed">
    <link rel="stylesheet" type="text/css" media="all" href="__PUBLIC__/jslib/bootstrap-daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/HotelPage/refund.css?rev=dfa4fbd24562f19b53d114293b9a30a8">
</block>
<block name="document">
    <div id="doc" class="container-above-md" data-today="{:date('Y-m-d')}">
        <include file="en_us:Public:Include_control_navbar" navbar-menu-setting="active" />
        <div id="doc-body" class="row">
            <include file="en_us:Public:Include_booking_tab" doc-side-refund="active" />
            <div id="doc-center"> 
                <div id="filterHeader" class="typo-text-black-deep">  
                    <div class="border-box" style="width: 120px;">
                        <div class="dropdown" id="navbar-refund-switch">
                            <ul class="dropdown-menu dropdown-menu-left Dropdown-menu-us">
                                <li class='active' data-value="0"><a href="javascript:void(0);">All</a></li>
                                <li data-value="1"><a href="javascript:void(0);">Apply for refund</a></li>
                                <li data-value="2"><a href="javascript:void(0);">Refunded</a></li>
                                <li data-value="3"><a href="javascript:void(0);">Rejected</a></li>
                            </ul>
                            <a data-toggle="dropdown" id="filterType" class="without-min-width" data-value="0" href="javascript:void(0);"><span class="info">All</span><span class="caret"></span></a>
                        </div>
                    </div>
                    <div class="border-box" id="datePickerContainer">
                        <div id="datePicker"><span class="iconfont icon-calendar"></span>&nbsp;<span class="start">{:date('Y-m-d')}</span>&nbsp;~&nbsp;<span class="end">{:date('Y-m-d')}</span></div>
                        <input id="datePickerInput" value="" />
                    </div>              
                    <div class="border-box">
                        <div class="row">
                            <input id="filterMobile" class="form-control" type="text" autocomplete="off" placeholder="Phone number" maxlength="11" value="" />
                        </div>     
                    </div>
                    <div class="btn-sm btn-accent btn-raised" id="filterSearch">Search</div>
                </div>
                <div class="content-panel">
                    <include file="en_us:Public:Include_content_loading" loading-container-id="loading" />
                    <div class="content-panel-body">
                        <table class="table content-panel-table vertical-margin">
                            <thead>
                                <tr>
                                    <th>Refund type</th>
                                    <th>Order No</th>
                                    <th>Booked person</th>
                                    <th>Total/{$hotelDefaultSymbol}</th>
                                    <th>Refund amount</th>
                                    <th>Charity Money</th>
                                    <th>Room information</th>
                                    <th>Check in date</th>
                                    <th>Check out date</th>
                                    <th>Order Status</th>
                                    <th>Reason for Refund</th>
                                    <th>Operating</th>
                                </tr>
                            </thead>
                            <tbody id="orderListBody">
                            </tbody>
                        </table>
                        <div id="orderListBodyEmpty" class="typo-text-black-light typo-subhead">Did not find an order to meet the conditions</div>
                    </div>
                    <div id="orderListPage" class="content-panel-footer hidden">
                        <div class="pull-right">
                            <ul class="pagination pagination-sm"></ul>
                        </div>
                        <div class="pull-right content-panel-pagination-info">
                            There are &nbsp;<span class="text-accent page-total"></span>&nbsp;Records，total page:&nbsp;<span class="text-accent page-count"></span>
                        </div>
                    </div>
                </div>
            </div>
            <!--end of doc-center-->
        </div>
        <!--end of doc body-->
    </div>
    <!--end of doc-->
    <!--js要用到的模板-->
    <script type="text/html" id="templatePage">
        <li><a href="javascript:void(0);"></a></li>
    </script>
    <script type="text/html" id="templateOrder">
        <tr>
            <td class="col-xs-1">
                <div class="order-refund-type"></div>
            </td>
            <td class="col-xs-1">
                <div class="order-number"></div>
            </td>
            <td class="col-xs-1">
                <div class="order-user-info help-text" data-container="body" data-html="true" data-toggle="tooltip" data-placement="bottom"></div>
            </td>
            <td class="col-xs-1">
                <div class="order-total"></div>
            </td>
            <td class="col-xs-1">
                <div class="order-refund-price"></div>
            </td>
            <td class="col-xs-1">
                <div class="order-charityprice"></div>
            </td>
            <td class="col-xs-1">
                <div class="order-room-info help-text" data-container="body" data-html="true" data-toggle="tooltip" data-placement="bottom"></div><span data-container="body" data-html="true" data-toggle="tooltip" data-placement="bottom" style="top: 0;" class="iconfont icon-question-sign"></span>
            </td>
            <td class="col-xs-1">
                <div class="order-checkin-date"></div>
            </td>
            <td class="col-xs-1">
                <div class="order-checkout-date"></div>
            </td>
            <td class="col-xs-1">
                <div class="order-status"></div>
            </td>
            <td class="col-xs-1">
                <div class="refund-reason help-text" data-container="body" data-html="true" data-toggle="tooltip" data-placement="bottom"></div>
            </td>
            <td class="col-xs-1 order-refund-action">
                <div data-toggle="modal" data-target="#refundModal" class="btn-link agreeRefundBtn">Confirm refund</div>
                <div data-toggle="modal" data-target="#rejectModal" class="btn-link refuseRefundBtn">Refuse</div>
            </td>
        </tr>
    </script>
    <!--Refuse模态框-->
    <div class="modal fade" data-backdrop="static" id="rejectModal">
        <div class="modal-dialog sm-width">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-title">Fill in the reasons for refusal</div>
                </div>
                <div class="modal-body">
                    <div class="clearfix text-sm">
                        <div class="col-xs-3 text-right vertical-padding">Order No:</div>
                        <div class="col-xs-9 text-error vertical-padding reject-order-number">&nbsp;</div>
                        <div class="col-xs-3 text-right vertical-padding">Booker:</div>
                        <div class="col-xs-9 text-error vertical-padding reject-order-user">&nbsp;</div>
                        <div class="col-xs-3 text-right vertical-padding">Book phone number:</div>
                        <div class="col-xs-9 text-error vertical-padding reject-order-user-mobile">&nbsp;</div>
                        <div class="col-xs-3 text-right vertical-padding">Total orders:</div>
                        <div class="col-xs-9 text-error vertical-padding reject-order-total">&nbsp;</div>
                    </div>
                    <form class="form-horizontal form-sm vertical-margin" onkeydown="if(event.keyCode==13){return false;}">
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Dismiss the reason:</label>
                            <div class="col-xs-5">
                                <textarea type="text" class="form-control" maxlength="50" id="requestRejectReason" placeholder="Please fill in the reasons for refusal"></textarea>
                            </div>
                            <div class="col-xs-4">
                                <div class="help-block"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="form-horizontal form-sm">
                        <div class="form-group">
                            <div class="col-xs-10 col-xs-offset-2">
                                <div class="help-block inline-help-block inline-help-block-right"></div>
                                <button type="button" class="btn-sm btn-primary btn-raised" data-value="" id="submitReject">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Confirm refund模态框-->
    <div class="modal fade" data-backdrop="static" id="refundModal">
        <div class="modal-dialog sm-width">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-title">Confirm refund<small style="color: red;"> (The charity of mony is non-refundable)</small></div>
                </div>
                <div class="modal-body">
                    <div class="typo-text-black-light text-center vertical-margin">
                        Refund rules:<span class="refund-rule"></span>
                    </div>
                    <div class="clearfix text-sm">
                        <div class="col-xs-3 text-right vertical-padding">Order No:</div>
                        <div class="col-xs-9 text-error vertical-padding refund-order-number">&nbsp;</div>
                        <div class="col-xs-3 text-right vertical-padding">Booker:</div>
                        <div class="col-xs-9 text-error vertical-padding refund-order-user">&nbsp;</div>
                        <div class="col-xs-3 text-right vertical-padding">Book phone number:</div>
                        <div class="col-xs-9 text-error vertical-padding refund-order-user-mobile">&nbsp;</div>
                        <div class="col-xs-3 text-right vertical-padding">Total orders:</div>
                        <div class="col-xs-9 text-error vertical-padding refund-order-total">&nbsp;</div>
                        <div class="col-xs-3 text-right vertical-padding">Charity Money:</div>
                        <div class="col-xs-9 text-error vertical-padding refund-order-charityprice">&nbsp;</div>
                        <div class="col-xs-3 text-right vertical-padding">Hotel set deposit:</div>
                        <div class="col-xs-9 text-error vertical-padding deposit">&nbsp;</div>
                    </div>
                    <form class="form-horizontal form-sm vertical-margin" onkeydown="if(event.keyCode==13){return false;}">
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Amount required for refund:</label>
                            <div class="col-xs-5">
                                <input type="text" class="form-control" id="requestRefund" maxlength="9" autocomplete="off" placeholder="Please fill in the refund amount (e. 250.99)" value="" />
                            </div>
                            <div class="col-xs-4">
                                <div class="help-block"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="form-horizontal form-sm">
                        <div class="form-group">
                            <div class="col-xs-10 col-xs-offset-2">
                                <div class="help-block inline-help-block inline-help-block-right"></div>
                                <button type="button" class="btn-sm btn-primary btn-raised" data-value="" id="submitRefund">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/dist/Home/common_control.js?rev=82f49a263c64790b0cf82e846e522ccd"></script>
    <script type="text/javascript" src="/Public/jslib/moment.js/2.9.0/moment.min.js"></script>
    <script type="text/javascript" src="/Public/jslib/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script type="text/javascript" src="/Public/dist/Home/HotelPage/refund.js?rev=991f6e2303a26b44ca5d28ed3d151a1d"></script>
</block>
